import '../Arr.css'
import React, { Component } from 'react'

import RouterView from '../router/RouterView'
import { RouterViewProps } from '../type/router.d'
import { NavLink } from 'react-router-dom'
import { TranslationOutlined, HeartOutlined, FunnelPlotFilled, GitlabFilled, SearchOutlined, UserOutlined, HeartFilled } from '@ant-design/icons'
import { Button, Form, Input } from 'antd';

type Props = {}

type State = {}

class Index extends Component<Props & RouterViewProps, State> {
  state = {
    flag: false,
    findFiag: false,
    fromindex: false,

  };
  handleClick() {
    this.setState({
      flag: !this.state.flag
    })
  }
  handle() {
    this.setState({
      findFiag: !this.state.findFiag
    })

  }
  fromindexs() {
    this.setState({
      fromindex: !this.state.fromindex
    })
  }
  fromindexsOne() {
    this.setState({
      fromindex: !this.state.fromindex
    })
  }
  close() {
    this.setState({
      findFiag: !this.state.findFiag
    })
  }
  render() {
    const { flag } = this.state
    return (
      <div className={flag ? 'on' : 'ons'}>
        <header>
          <div className='abbout'>
            <div><span>
              <NavLink to='/index/article' className='cerr'>文章</NavLink>
            </span>
              <span>
                <NavLink to='/index/archive' className='cerr'>归档</NavLink>
              </span>
              <span>
                <NavLink to='/index/knowledge' className='cerr'>知识小册</NavLink>
              </span>
              <span>
                <NavLink to='/index/messageboard' className='cerr'>留言板</NavLink>
              </span>
              <span>
                <NavLink to='/index/about' className='cerr'>关于</NavLink>
              </span>
            </div>
            <div>
            </div>
            <div className='antdIcons'>
              <span> {<TranslationOutlined />}</span>
              <span onClick={this.handleClick.bind(this)}>{flag ? <HeartFilled /> : <HeartOutlined />}</span>
              <span onClick={this.handle.bind(this)}>{<SearchOutlined />}</span>
              <span onClick={this.fromindexs.bind(this)}>{<UserOutlined />}</span>
            </div>
          </div>
        </header>
        <main>
          <div className='figures'> <RouterView routes={this.props.routes}></RouterView></div>
        </main>

        {/* input搜素 */}
        {this.state.findFiag ? <div className='inputs'>
          <div className='search'>
            <div className='searchTitle'>
              <h1>文章搜索</h1>
              <h1 onClick={this.close.bind(this)}>X</h1>
            </div>
            <div className='inputTitle'>
              <input type="text" />
              <button>搜索</button>
            </div>
          </div>
        </div> : null
        }

        {/* 登录 */}
        {
          this.state.fromindex ? <div className='fromIndex'>
            <div className='fromIndexs'>
              <h1 onClick={this.fromindexsOne.bind(this)}>X</h1>
              <div className='fromsIndex'>
                <Form
                  name="basic"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  initialValues={{ remember: true }}
                  //  onFinish={this.onFinish.bind(this)}
                  //  onFinishFailed={this.onFinishFailed.bind(this)}
                  autoComplete="off"
                >
                  <Form.Item
                    label="账号"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                  >
                    <Input.Password />
                  </Form.Item>

                  <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                  </Form.Item>

                  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                      登录
                    </Button>
                  </Form.Item>
                </Form>
              </div>

            </div>
          </div> : null
        }
        <footer>
          <div><span><FunnelPlotFilled /></span><span><GitlabFilled /></span></div>
          <div><p>Copyight @ 022.All Rights Reserved</p>
            <p><span>后台管理</span><span>皖 ICP备18005737</span></p></div>
        </footer>

      </div>

    )
  }
}
export default Index